import { CloseOutlined } from '@ant-design/icons';
import { TextWidget } from '@inbiz/react';
import { Typography } from 'antd';

const ProcessGroupSelectItem = (props: any) => {
  const { Text } = Typography;
  const { item, onChange, setSelectedGroup, setSelectedRowKeys, selectedGroup } = props;

  const DeleteItem = () => {
    let _selectedGroup = selectedGroup?.filter((item1: any) => {
      return item1?.groupId != item?.groupId
    })
    setSelectedGroup(_selectedGroup);
    let _selectedRowKeys = _selectedGroup?.map((item2: any) => {
      return item2?.groupId
    });
    setSelectedRowKeys(_selectedRowKeys);
    onChange(_selectedGroup);
  };

  return (
    <div className="process-selector-item">
      <div className="process-selector-item-text">
        <Text code><TextWidget>{item.groupName}</TextWidget></Text>
      </div>
      <div className="process-selector-item-close">
        {/* @ts-ignore */}
        <CloseOutlined onClick={DeleteItem} />
      </div>
    </div>
  );
};

export default ProcessGroupSelectItem;
